<!-- 监听执行动作 -->
<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" height="90" bgColor="#0081ff" leftIconSize="32" leftIconColor="#ffffff">
			<view class="u-nav-slot margin-top-xl flex" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff"></u-icon>
			</view>
			<view slot="center" class="u-nav-slot margin-top-xl" style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 16px;"> 编 辑</view>
			</view>
			<view class="u-nav-slot flex margin-top-xl" slot="right">
				<u-icon name="reload" size="32" color="#FFFFFF" @tap="reset()"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="checkbox-mark" size="32" color="#FFFFFF" @tap="save()" ></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef H5 || APP -->
		<u-navbar :autoBack="true" height="60" bgColor="#0081ff" leftIconSize="32" leftIconColor="#ffffff">
			<view class="u-nav-slot flex margin-top-xl" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff"></u-icon>
			</view>
			<view slot="center" class="u-nav-slot margin-top-xl" style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 16px;"> 编 辑</view>
			</view>
			<view class="u-nav-slot flex margin-top-xl" slot="right">
				<u-icon name="reload" size="32" color="#FFFFFF" @tap="reset"></u-icon>
				<u-icon name="checkbox-mark" size="32" color="#FFFFFF" @tap="save()()"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->

		<view>
			<view class="padding-sm text-xxl ">选择执行动作</view>
			<view>
				<scroll-view class="uni-swiper-tab uni-scroll-view " scroll-x="true" scroll-left="120"
					cancelable="false">
					<view v-for="(item,index) in buttonList" :key="index" class="scrollx_items">
						<view class="padding bg-white text-center light  device-list"
							:class="item.checked == true? 'bg-blue': ''" @tap="select(item.buttonId)">
							<image class="margin-top-sm" :src="imgUrl + item.image" style="width: 5vh;height: 5vh;">
							</image>
							<text class="margin-top-sm">{{item.buttonName}}</text>
						</view>
						<radio-group class="block flex margin-left-sm" @change="RadioChange" :data-index="index">
							<view class="flex">
								<view class="title">开</view>
								<radio class="margin-left-sm" data-id="{{}}" :class="item.radio=='open'?'checked':''"
									:checked="item.radio=='open'?true:false" value="open">
								</radio>
							</view>
							<view class="flex margin-left-sm">
								<view class="title">关</view>
								<radio class="margin-left-sm" :data-set="index" :class="item.radio=='off'?'checked':''"
									:checked="item.radio=='off'?true:false" value="off">
								</radio>
							</view>
						</radio-group>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="margin-sm text-xl">参数设置</view>

		<!-- 数据-->
		<view class="margin-sm">
			<view class="cu-form-group">
				<view class="title">设置{{type}}值：</view>
				<input v-model="value" placeholder="请设置相关参数'"></input>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				type: null,
				numId: null,
				buttonList: [],
				selectId: [],
				radio: null,
				button: {
					buttonName: null,
					subscribe: null,
					open: null,
					off: null
				},
				value: null,
				execteList: [],
			}
		},
		onLoad(option) {
			this.numId = option.id
			this.type = option.type
			if (this.type == 'max') {
				this.value = option.max
			} else {
				this.value = option.min
			}
			this.getButton()
		},
		methods: {

			
			// 保存设置
			save() {
				let list = []
				if (this.isEmpty(this.selectId, this.buttonList)) {
					for (var i = 0; i < this.selectId.length; i++) {
						let index = this.buttonList.findIndex(item => item.buttonId == this.selectId[i]);
						let obj = new Object()
						obj.buttonId = this.buttonList[index].buttonId
						obj.action = this.buttonList[index].radio == 'open' ? 1 : 0
						list.push(obj)
					}
					this.$http.request({
						url: 'app/execute/save',
						method: 'POST',
						data: {
							'numId': this.numId,
							'list': list,
							'type': this.type,
							'value': this.value
						},
						success: (data) => {
							if (data.data && data.data.code == 0) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: "请补全相关参数后，再设置定时",
						icon: "none",
						position: 1000
					})
				}
			},
			isEmpty(selectId, buttonList) {
				if (selectId.length <= 0) {
					return false
				}
				if (this.value == null) {
					return false
				}
				for (var i = 0; i < selectId.length; i++) {
					let index = buttonList.findIndex(item => item.buttonId == selectId[i]);
					if (index >= 0 && buttonList[index].radio === null) {
						return false
					}
				}
				return true
			},
			//设置选择的按钮
			select(buttonId) {
				let that = this
				var items = this.buttonList
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].buttonId == buttonId) {
						if (!items[i].checked) {
							this.selectId.push(buttonId)
						} else {
							that.remove(that.selectId, buttonId)
						}
						items[i].checked = !items[i].checked;
					}
				}
				this.buttonList = items
			},
			// 选择执行的指令
			RadioChange(e) {
				let index = e.currentTarget.dataset.index
				this.buttonList[index].radio = e.detail.value
			},
			getExecteList() {
				let that = this
				this.$http.request({
					url: 'app/execute/list',
					method: 'GET',
					data: {
						numId: this.numId,
						type: this.type
					},
					success(data) {
						let list = data.data.list
						that.execteList = list
					}
				})
			},
			getButton() {
				let that = this
				this.getExecteList()
				this.$http.request({
					url: 'app/button/listByUserIdAll',
					method: 'GET',
					success(data) {
						let list = data.data.list
						for (var i = 0; i < list.length; i++) {
							list[i].checked = false
							list[i].radio = null
							for (var j = 0; j < that.execteList.length; j++) {
								if (list[i].buttonId == that.execteList[j].buttonId) {
									list[i].checked = true
									list[i].radio = that.execteList[j].action == '1' ? 'open' : 'off'
									that.selectId.push(list[i].buttonId)
								}
							}
						}
						that.buttonList = list
					}
				})
			},
			remove(arr, val) {
				var index = arr.indexOf(val);
				if (index > -1) {
					arr.splice(index, 1);
				}
			},
		}
	}
</script>

<style>
	.device-list {
		width: 7rem;
		height: 7rem;
		border: #DDDDDD solid 2px;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px;
	}

	/* 二级菜单设置左右滑动 */
	.uni-swiper-tab {
		white-space: nowrap;
	}

	.scrollx_items {
		display: inline-block;
		box-sizing: border-box;
		margin-left: 10rpx;
		margin-top: 3px;
	}

	.uni-scroll-view {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss">
	.u-page {
		padding: 0;
		flex: 1;
		background-color: $u-bg-color;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
